<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>

    <router-view />

    <h2>HelloVuex里的数:</h2>
    <h4>state相关信息：</h4>
    <HelloVuex />

    <h2>App里的数</h2>
    <h4>state相关信息：</h4>
    <!-- 把在store窗台管理里面的东西拿出来用 -->
    {{ $store.state.count }}
    <br />
    {{ $store.getters.powerCounter }}
    <br />
    {{ $store.getters.more20stu }}
    <br />
    {{ $store.getters.more20stuLength }}
    <br />
    {{ $store.getters.moreAgeStu }}<br />
    {{ $store.getters.moreAgeStu(19) }}

    <br />
    <button @click="add">+</button>
    <button @click="jian">-</button>
    <!-- mutation传递参数 -->
    <button @click="addCount(5)">+5</button>
    <button @click="addCount(10)">+10</button>
    <button @click="addStudent">添加学生对象</button>
  </div>
</template>
<script>
import HelloVuex from "@/views/HelloVuex";
import { INCREMENT } from "./store/mutation-types";
export default {
  data() {
    return {};
  },
  components: {
    HelloVuex,
  },
  methods: {
    add() {
      // this.$store.commit("increment");
      this.$store.commit(INCREMENT);
    },
    jian() {
      this.$store.commit("decrement");
    },
    addCount(count) {
      // payload: 负载
      // 1.普通的提交封装 这样写的 mutations里的 incrementCount(state, count) 的count就是count
      // this.$store.commit("incrementCount", count); // 单个参数

       // 2.特殊的提交封装 mutations里的 incrementCount(state, count) 的count 是一个对象 写成payload比较合适，通过payload.count取
      this.$store.commit({
        type: "incrementCount",
        count,
      });
    },
    addStudent() {
      // 提交对象
      const stu = { id: 114, name: "alan", age: 35 };
      this.$store.commit("addStudent", stu);
    },
  },
};
</script>
<style>
</style>
